import React from "react";
import { Card, Button, Space, Tag, Typography } from "antd";
import { useRequest } from "ahooks";
import { history } from "umi";

const { Text, Paragraph } = Typography;

// 模拟 API 请求
const fetchUserInfo = (
  id: number
): Promise<{ id: number; name: string; email: string }> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        id,
        name: `用户${id}`,
        email: `user${id}@example.com`,
      });
    }, 1000);
  });
};

const BasicPage: React.FC = () => {
  const { data, loading, error, run } = useRequest(fetchUserInfo, {
    defaultParams: [1],
  });

  return (
    <div style={{ padding: "24px" }}>
      <Button
        onClick={() => history.push("/")}
        style={{ marginBottom: "16px" }}
      >
        返回首页
      </Button>

      <Card title="useRequest 基础用法" style={{ marginBottom: "16px" }}>
        <Paragraph>
          <Text strong>功能说明：</Text> 测试 useRequest
          的基本功能，包括自动请求、加载状态、错误处理等。
        </Paragraph>

        <Space direction="vertical" style={{ width: "100%" }}>
          <div>
            <Text strong>状态：</Text>
            {loading && <Tag color="processing">加载中...</Tag>}
            {error && <Tag color="error">错误: {error.message}</Tag>}
            {data && <Tag color="success">成功</Tag>}
          </div>

          <div>
            <Text strong>数据：</Text>
            {data && (
              <div style={{ marginTop: "8px" }}>
                <p>ID: {data.id}</p>
                <p>姓名: {data.name}</p>
                <p>邮箱: {data.email}</p>
              </div>
            )}
          </div>

          <Space>
            <Button type="primary" onClick={() => run(1)} loading={loading}>
              获取用户1
            </Button>
            <Button onClick={() => run(2)} loading={loading}>
              获取用户2
            </Button>
            <Button onClick={() => run(3)} loading={loading}>
              获取用户3
            </Button>
          </Space>
        </Space>
      </Card>
    </div>
  );
};

export default BasicPage;
